iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
自我挑戰組

ProtoPie 摸一摸系列 第 12

連續 30 天 玩玩看 ProtoPie - Day 12

  • 分享至 

  • xImage
  •  

第二種啟動相機的方法

昨天勾選 Camera 的 Auto Start 來啟動相機。

今天使用第二種方法,就是 Start Trigger 。

我們先把昨天 Camera 的 Auto Start 取消勾選。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941bPhhXryJSQ.png

接著幫 Camera 選擇 Start 這個 Trigger ,而底下的 Response 選擇 Camera 。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941l8XmT0w4OH.png

https://ithelp.ithome.com.tw/upload/images/20210927/20141941SW6ErsZve1.png

這樣就會跟昨天看到的 Auto Start 得到一樣的結果,讓手機的相機能被 ProtoPie Player 的 App 使用。

切換前後相機

下一步我們要切換前後相機,先選擇左上角這個  Btn / Switch 。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941XxT8vuDuQ2.png

對應到的是下面右邊這個按https://ithelp.ithome.com.tw/upload/images/20210927/20141941mLQ33se09N.png鈕。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941f09W1cIsjH.png

我們選擇 Tap 這個 Trigger 然後 Camera 的 Response 。
不過 Camera 裡面我們選擇 Switch 。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941qSBndVBAcM.png

接著只要在上面 Preview 裡面點一下藍色小三角形,你的手機上的 ProtoPie Player 就會自動更新囉。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941bkJV0onbZN.png

按那個鈕就能切換前後相機了!

模擬相機拍照

最後我們就是要模擬相機拍照,我們選擇 Btn / Shutter ,然後用 Tap 這個 Trigger 。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941Pf6h6AJYRm.png

Response 一樣用Camera ,Layer 也是選擇 Camera 1,只是這次要選擇 Stop 。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941lZokOx19pd.png

這時候 Stop 會發生什麼事情呢,這畢竟只是個模擬讓畫面靜止(所以才是Stop)。

請把他想像成螢幕截圖一樣。

未來如果你想要對 Camera 1 這個 Layer 做什麼,例如放大縮小,都是可以模擬出來的。

模擬文字輸入

接著我們要來實作文字輸入。

我們先來到 Settings 頁面。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941PspAk892dv.png

左上角選擇 Text > Input 。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941JTZFygCt65.png

然後在頁面上選個地方放上去。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941jzS7pUKbzc.png

雖然直接 Preview 只能透過電腦鍵盤輸入,使用手機 ProtoPie Player 時就能跟真實的 app 一樣直接用手機鍵盤。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941CEeYRaROj8.png

右邊的選項裡面,除了可以選擇單行的輸入匡,也能選擇多行的輸入框。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941cSifp2dgYG.png

但你看我這樣文字全部都擠在一起,這時候就要勾選右手邊的 Auto Height ,讓文字輸入筐跟著長大。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941wqRcbExGSe.png

接著最重要的是輸入框裡面的提示文字 Placeholder 。

https://ithelp.ithome.com.tw/upload/images/20210927/201419416pOqeLr7qu.png

你可以選擇文字背景的顏色、編框圓角、padding、boarder (box model那樣)...等。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941T32Q636hHO.png

我們簡單把背景顏色取消勾選就好。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941JIGAOWblLG.png

接下來最棒的地方是很多很糟糕的 app 會有的情況,就是輸入的時候給你難用的鍵盤...

這邊可以選擇你要 ProtoPie 使用哪種鍵盤,你用手機測試的時候就會出現。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941uLxSxbj80O.png

https://ithelp.ithome.com.tw/upload/images/20210927/20141941jY7BdE9hqD.png

https://ithelp.ithome.com.tw/upload/images/20210927/201419418EtqzgKWG4.png

甚至 iOS 還可以用 dark mode 。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941i8aA3IthYt.png

如果你要輸入密碼...也行。

https://ithelp.ithome.com.tw/upload/images/20210927/20141941bPq7AKKXu1.png

有時候就是會突然醒來,然後有些事情變得好清楚。

明天繼續。


上一篇
連續 30 天 玩玩看 ProtoPie - Day 11
下一篇
連續 30 天 玩玩看 ProtoPie - Day 13
系列文
ProtoPie 摸一摸30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言